<style>
    #home {
        width: 100%;
        min-width: 890px;
        position: relative;
    }

    #home .demo-table-expand {
        font-size: 0;
    }

    #home .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    #home .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 80%;
    }

    #home .el-table__expand-column .el-table__expand-icon {
        height: 39px;
    }

    #home .table {
        transition: 1s all;
    }

    #home .el-carousel__container {
        height: 440px;
    }

    .el-tooltip__popper {
        max-width: 400px;
    }

    .el-step__main {
        max-width: calc(100% - 60px);
    }

    #home .homeTable {
        width: 95% !important;
        margin: 10px 20px 0;
    }

    #home .datePicker {
        width: 140px !important;
        height: 24px !important;
        margin-top: 29px;
        margin-right: 18px;
        float: left;
    }

    #home .datePicker .el-input__inner {
        border-radius: 2px !important;
        height: 24px !important;
    }

    #home .add {
        background: url("/static/images/add.png") no-repeat center;
    }

    #home .del {
        background: url("/static/images/del.png") no-repeat center;
    }

    #home .search {
        background: url("/static/images/search.png") no-repeat center;
    }

    #home .sel {
        background: url("/static/images/sel.png") no-repeat center;
    }

    #home .icon {
        float: left;
    }

    #home .btn span {
        float: left;
        margin-top: 4px;
        margin-left: 2px;
    }

    #home .btn {
        height: 24px;
        line-height: 1;
        border: none;
        background: #f8fafb;
        outline: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        float: left;
        font-size: 14px;
        color: #1f2d3d;
        margin-top: 29px;
        margin-right: 16px;
    }

    #home .btn-print {
        margin-right: 0;
    }

    #home .btn:hover {
        color: #5468ee;
    }

    #home .inner {
        margin: 0 20px;
    }

    #home .btn-nav {
        height: 60px;
        overflow: hidden;
    }

    #home .btn-nav .el-input .el-input__inner {
        height: 24px;
    }

    #home .btn-nav .el-input {
        float: left;
        margin-top: 29px;
        margin-right: 18px;
        width: 140px;
        height: 24px;
    }

    #home h4 {
        padding-left: 20px;
        margin-bottom: 0px;
    }

    #home .formBottom {
        margin-top: 10px;
    }

    #home .homeCombinationDetails .el-date-editor.el-input {
        width: 100%;
    }

    #home .homeCombinationDetails {
        margin-top: 30px;
    }
</style>
<style>
    .steps {
        position: absolute;
        bottom: 10px;
        left: 30px;
        margin: auto;
    }

    .el-dialog__headerbtn {
        position: absolute;
        right: 25px;
        top: 15px;
    }

    .el-step__main {
        margin-left: -8px !important;
    }
</style>
<style>
    .el-date-editor.el-input {
        width: 100%;
    }
</style>

<div id="home">
    <!--页面调整-->
    <el-row
            v-loading="showLoading"
            element-loading-text="拼命加载中">
        <div class="inner btn-nav">

            <el-input
                    v-model="lostCkdjNo"
                    icon="search"
                    placeholder="出库单号"></el-input>

            <el-input
                    v-model="lostRkdjNo"
                    icon="search"
                    placeholder="入库单号"></el-input>
        </div>
        <el-table
                :data="home"
                :max-height="config_table_height()"
                ref="table"
                class="homeTable"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="出库单号"
                    show-overflow-tooltip
                    prop="lostCkdjNo"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="入库单号"
                    show-overflow-tooltip
                    prop="lostRkdjNo"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="货品编号"
                    show-overflow-tooltip
                    prop="lostNo"
                    align="center">

            </el-table-column>
            <el-table-column
                    label="抓取时间"
                    show-overflow-tooltip
                    prop="lostTime"
                    align="center">
                <template scope="scope">{{auto_time_new(scope.row.lostTime,6)}}</template>
            </el-table-column>
            <el-table-column
                    align="center"
                    class-name="operationMore"
                    label="操作"
                    width="120">
                <template scope="s">
                    <el-button type="success" icon="edit" size="mini" @click="newInput(s.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20, 100, 500, 1000, 5000, 10000]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="currentTotal">
            </el-pagination>
        </div>
        <el-dialog
                size="large"
                v-model="dialogFormVisible">
            <div class="dialog-title clearfix" slot="title">
                <span class="el-dialog__title">{{form.title}}</span>
                <el-steps
                        class="steps"
                        :space="120"
                        :active="dialogFormActive"
                        finish-status="success">
                </el-steps>
            </div>
            <el-form :model="form" ref="ref_form" :rules="rule_form">
                <el-row>
                    <el-col :span="10">
                        <el-form-item
                                label="货品编号"
                                prop="bgGoodsNo"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model="form.bgGoodsNo        "
                                    disabled
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="货品名称"
                                prop="bgGoodsName"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model="form.bgGoodsName           "
                                    auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item
                                label="货品简称"
                                prop="bgNamejc"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model="form.bgNamejc"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="整箱单位"
                                :label-width="formLabelWidth">
                            <el-select
                                    v-model="form.bgZxdw"
                                    placeholder="请选择单据类型">
                                <el-option :label="item.bdName" :value.number="item.bdDwId" v-for="item in dw1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="散支单位"
                                :label-width="formLabelWidth">
                            <el-select
                                    v-model="form.bgSzdw"
                                    placeholder="请选择单据类型">
                                <el-option :label="item.bdName" :value.number="item.bdDwId" v-for="item in dw2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="备注"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model="form.bgRemarks"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="2">
                        <el-form-item
                                label="货品体积"
                                prop="bgGoodsTj"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.bgGoodsTj"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="货品重量"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.bgGoodsZl"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="单价"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model="form.bgGoodsPrice"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="换算量"
                                prop="bgHsl"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.bgHsl"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="规格"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.bgGoodsGg"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" :loading="submitLoading">保存
                </el-button>
            </div>
        </el-dialog>
    </el-row>
</div>

<script>
    var home = new Vue({
        el: '#home',
        prop: {},
        data: function () {
            return {
                home: [],                 //主页面 信息集合
                lostCkdjNo: '',          //主页面 出库编号  搜索
                lostRkdjNo: '',          //主页面 入库编号  搜索
                showLoading: false,     //主页面 加载 维护
                currentPage: 1,          //分页 当前页
                currentTotal: 1,         //分页 总页数
                pageSize: 10,             //分页 分页大小
                postType: 1,
                form: _form(),                             //新建 弹出层 信息集合
                dialogFormActive: 0,                      //新建 弹出层 steps 当前进度
                dialogFormVisible: false,                 //新建 弹出层 是否可见
                submitLoading: false,                     //新建 弹出层 提交等待
                rule_form: autoValidate(validate_form()),  // 编辑验证规则
                formLabelWidth: '120px',                 //表单 配置
                dw: [],                          //单位 集合
            }
        },
        computed: {
            option: function () {
                return {
                    "draw": 1,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "lostCkdjNo": this.lostCkdjNo.trim(),
                    "lostRkdjNo": this.lostRkdjNo.trim(),
                }
            },           //主页面 post 0
            dw1: function () {
                var temp = [];
                for (var i = 0; i < this.dw.length; i++) {
                    if (this.dw[i].bdStatus == 1) {
                        temp.push(this.dw[i]);
                    }
                }
                return temp;
            },
            dw2: function () {
                var temp = [];
                for (var i = 0; i < this.dw.length; i++) {
                    if (this.dw[i].bdStatus == 2) {
                        temp.push(this.dw[i]);
                    }
                }
                return temp;
            }

        },
        methods: {
            handleSizeChange: function (val) {
                /*<debug>*/
                console.log('每页' + val + '条');
                /*</debug>*/
                this.pageSize = val;
                if (this.postType === 1) {
                    p[0].post(this.option);
                } else {
                    p[1].post(this.option);
                }

            },                                   //分页 Size
            handleCurrentChange: function (val) {
                /*<debug>*/
                console.log('当前第' + val + '页');
                /*</debug>*/
                this.currentPage = val;
                if (this.postType === 1) {
                    p[0].post(this.option);
                } else {
                    p[1].post(this.option);
                }

            },                                //分页 当前页

            newInput: function (row) {
                this.form = _form();
                this.dialogFormVisible = true;
                this.dialogFormActive = 0;
                if (obj.$refs.ref_form) {
                    obj.$refs.ref_form.resetFields();
                }
                obj.$nextTick(function () {
                    obj.form.bgGoodsNo = row.lostNo;
                });
            },                                           //按钮 新建入库单
            submit: function () {
                this.$refs['ref_form'].validate(function (valid) {
                    if (valid) {
                        if (obj.form.title === '新建货品') {
                            p[9].post({ bgGoodsNo: obj.form.bgGoodsNo}, function (json) {
                                this.callbackAfter({status: json.status, model: '货品编号查重'}, function () {
                                    p[2].post(obj.form);
                                    obj.submitLoading = true;
                                })
                            })
                        } else {
                            p[1].post(obj.form)
                        }
                        obj.dialogFormActive++;
                        obj.submitLoading = false;
                    } else {
                        return false;
                    }
                });
            },                                                //新建 表单提交

        },
        watch: {
            lostCkdjNo: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post(this.option);
                this.postType = 1;
            },
            lostRkdjNo: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[1].post(this.option);
                this.postType = 2;
            },

        }
    });

    var obj = home;
    var p = [];
    // 0  分页查询 出库单
    p[0] = autoPost({
        urlHock: "",
        urlProd: "/route/home/0",
        success: function (json) {
            obj.$data.home = json.data;
            obj.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 1  分页查询 入库单
    p[1] = autoPost({
        urlHock: "",
        urlProd: "/route/home/2",
        success: function (json) {
            obj.$data.home = json.data;
            obj.$data.currentTotal = json.recordsFiltered;
        }
    });

    function _form() {
        return {
            title: '新建货品',
            "bgGoodsId": 0,
            "bgGoodsNo": "",
            "bgGoodsName": "",
            "bgNamejc": "",
            "bgT": 0,
            "bgI": 0,
            "bgHsl": 0,
            "bgZxdw": 2,
            "bgSzdw": 1,
            "bgStatus": 1,
            "bgArehouseId": 0,
            "bgClientId": 0,
            "bgGoodsType": "",
            "bgGoodsTj": 0,
            "bgGoodsZl": 0,
            "bgGoodsPrice": 0,
            "bgCreatetime": (new Date()).toJSON(),
            "bgRemarks": "",
            "bgGoodsGg": "",
            "baseDws": []
        }
    }               //弹出层 form 模板
    function validate_form() {
        return {
            bgNamejc:'vNull',
            bgGoodsNo: 'vNull',
            bgGoodsName: 'vNull',
            bgHsl: ['vNull','vNumber','vN0Number','vNumberZ','vNumberZZ'],
            bgGoodsTj: ['vNull','vN0Number','vNumber','vNumberZ'],
        }
    }

    // 2 货品管理 新增
    p[2] = autoPost({
        urlHock: "",
        urlProd: "/route/goodsManage/12",
        success: function (json) {
            obj.submitLoading = false;
            this.callbackAfter({status: json.status, model: '货品新增'}, function () {
                obj.dialogFormActive = 0;
                if(obj.postType === 1) {
                    p[0].post(obj.option);
                } else {
                    p[1].post(obj.option);
                }
                if (obj.$refs.carousel) obj.$refs.carousel.setActiveItem(0);
                obj.dialogFormVisible = false;
            })
        }
    });
    // 6 货品管理 删除
    p[6] = autoPost({
        urlHock: "",
        urlProd: "/route/goodsManage/6",
        method: 'GET',
        success: function (json) {
            this.callbackAfter({status: json.status, model: '货品删除'});
        }
    });
    // 8 货品管理
    p[8] = autoPost({
        urlHock: "",
        urlProd: "/route/goodsManage/8",
        success: function (json) {
        }
    });
    // 9 货品管理 货品编号 查重
    p[9] = autoPost({
        urlHock: "",
        urlProd: "/route/goodsManage/9",
        method: 'POST'
    });

    /*
    p[0].post(obj.option);
    homeTimer = homeTimer || setInterval(function () {
            p[0].post(obj.option);
//        }, 1000)
        },timer_span.home)
    */
</script>